<template>
  <div>
    <el-card>
      <el-row style="float: left;">
        <el-button icon="el-icon-search" style="background: #D3DCE6;" @click='chaxun'>查询</el-button>
        <el-button icon="el-icon-plus"  style="margin-left:-3px;background: #D3DCE6;" @click="zhiding">制作巡检任务</el-button>
      </el-row>
      <br>
      <el-table :data="tableData" style="text-align: center;width:100%; margin-top: 20px;" border>
        <el-table-column label="任务名称" prop="rwname" width="160px"></el-table-column>
        <el-table-column label="下发人" prop="createby" width="100px"></el-table-column>
        <el-table-column label="巡检员" width=" 180px;">
          <template slot-scope="scope">
            <span v-for="item in scope.row.users">
              <el-tag>{{item.uname}}</el-tag>
            </span>

          </template>
        </el-table-column>
        <el-table-column label="巡检线路" prop="xianlu.xlname" width="100px"></el-table-column>
        <el-table-column label="是否取消" width="100px">
          <template slot-scope="scope">
            <span v-text="scope.row.runtype==0?'否':'是'"></span>
          </template>

        </el-table-column>
        <el-table-column label="完成时间" prop="oktime"></el-table-column>
        <el-table-column label="状态" prop="type" width="100px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width='270px;'>
            <el-button type="text" size="small" @click="chakan(scope.row)" :disabled="scope.row.runtype==1">查看</el-button>
            <el-button type="text" size="small" @click="fenpei(scope.row)" :disabled="scope.row.type==='已分配'||scope.row.type==='执行中'||scope.row.type==='已完成'||scope.row.runtype==1">分配</el-button>
            <el-button type="text" size="small" @click="quxiao(scope.row)" :disabled="scope.row.type==='已分配'||scope.row.type==='执行中'||scope.row.type==='已完成'||scope.row.runtype==1">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="pager" @prev-click="pager" @next-click="pager" background layout="prev,pager,next,total,jumper"
        :total="total" :page-size="
      size"></el-pagination>
    </el-card>
    <el-dialog title="联合搜索" :visible.sync="searchvisible" width="40%" style="text-align: center;margin: auto;">
      <el-form :model="searchForm">
        <el-form-item label="任务编号" label-width="100px">
          <el-input v-model="searchForm.rwid" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="下发人" label-width="100px">
          <el-input v-model="searchForm.createby" style="width: 220px;"></el-input>
        </el-form-item>

        <el-form-item label="任务是否取消" label-width="100px">
          <el-select v-model="searchForm.runtype" style="width: 220px;">
            <el-option v-for="item in runtype" :value="item.value" :label="item.lable" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成时间" label-width="100px">
          <el-date-picker v-model="searchForm.okdate" type="date" value-format="yyyy-MM-dd" style="width: 220px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" label-width="100px">
          <el-select v-model="searchForm.type" style="width: 220px;">
            <el-option v-for="item in type" :value="item.value" :label="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <template>
          <el-button @click="searchvisible = false">取 消</el-button>
          <el-button type="primary" @click="searchclose()">确 定</el-button>
        </template>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        searchvisible: false,
        addvisible: false,
        tableData: [],
        searchForm: {
          rwid: '',
          createby: '',

          runtype: '',
          okdate: '',
          type: ''
        },
        runtype: [{
          value: 0,
          lable: '否'
        }, {
          value: 1,
          lable: '是'
        }],
        type: [{
            value: '已完成'
          },
          {
            value: '待分配'
          },
          {
            value: '已分配'
          },
          {
            value: '执行中'
          }
        ],
        xianlus: [],
        size: 3,
        total: 0,
        click: 'all'
      }
    },
    methods: {
      chaxun: function() {

        this.searchvisible = true
      },
      searchclose: function() {
        this.click = 'where'
        let postDate = this.$qs.stringify({
          rwid: this.searchForm.rwid,
          createby: this.searchForm.createby,

          runtype: this.searchForm.runtype,
          okdate: this.searchForm.okdate,
          type: this.searchForm.type,
          pageNo: 1,
          pageSize: this.size
        })
        console.log(this.searchForm)
        axios.post("http:localhost:8086/zhu/where", postDate).then(vs => {
          this.tableData = vs.data.list
          this.total = vs.data.total

        })

        this.searchvisible = false
      },
      getXianlus: function() {
        axios.post('http:localhost:8086/xianlu/selectXianlu').then(vs => {
          this.xianlus = vs.data
        })
      },
      zhiding: function() {
        this.$router.push({
          path: '/zhiding'
        })
      },
      changeXinalu: function(row) {
        console.log(row)
      },
      getData: function(pageNo, pageSize) {
        let postDate = this.$qs.stringify({
          pageNo: pageNo,
          pageSize: this.size
        })
        axios.post("http:localhost:8086/zhu/all", postDate).then(vs => {
          this.tableData = vs.data.list
          this.total = vs.data.total
          console.log(this.tableData)
        })
      },
      pager: function(pageNo) {
        if (this.click == 'all') {
          this.getData(pageNo)
        } else if (this.click = 'where') {
       let postDate = this.$qs.stringify({
         rwid: this.searchForm.rwid,
         createby: this.searchForm.createby,

         runtype: this.searchForm.runtype,
         okdate: this.searchForm.okdate,
         type: this.searchForm.type,
         pageNo: pageNo,
         pageSize: this.size
       })
       console.log(this.searchForm)
       axios.post("http:localhost:8086/zhu/where", postDate).then(vs => {
         this.tableData = vs.data.list
         this.total = vs.data.total

       })
        }
      },
      aaa: function(asd) {
        var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()

        console.log(Y + M + D + h + m + s);
        return Y + M + D + h + m + s;
      },
      chakan(row) {
        this.$router.push({
          path: '/chakan',
          query: row
        })
      },
      fenpei:function(row){
      this.$router.push({
        path: '/fenpei',
        query: row
      })
      },
      quxiao:function(row){
      let postaData=this.$qs.stringify({
        id:row.id
      })
      console.log(row.id)
      console.log(row.runtype)
      this.$confirm('取消之后这个任务将不可进行操作, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
            axios.post('http:localhost:8086/zhu/quxiao',postaData).then(vs=>{
              if(vs.status == 200){
              this.$message('取消成功')
              this.getData(1)
              }else{
                this.$message('取消失败')
              }
            })
            }).catch(()=>{

            })
      }
    },
    created() {
      this.getXianlus()
      this.getData(1)
    }
  }
</script>
<style scoped="scoped">
  .w1 {
    width: 100px;
  }
</style>
